import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import '../../core/constants.dart';
import '../../data/master_vocabulary.dart';
import '../../shared/providers/vocabulary_learning_provider.dart';
import '../../shared/providers/coin_provider.dart';
import '../../shared/providers/quiz_provider.dart';
import '../../shared/widgets/coin_balance_widget.dart';
import '../words/word_list_page.dart';
import '../words/favorites_page.dart';
import '../words/vocabulary_learning_page.dart';
import '../words/vocabulary_browser_page.dart';
import '../learning/learning_records_page.dart';
import '../notes/wrong_questions_page.dart';
import '../quiz/daily_quiz_page.dart';

class HomePage extends ConsumerStatefulWidget {
  const HomePage({super.key});

  @override
  ConsumerState<HomePage> createState() => _HomePageState();
}

class _HomePageState extends ConsumerState<HomePage> with TickerProviderStateMixin {
  final TextEditingController _searchController = TextEditingController();
  late PageController _pageController;
  Timer? _autoPlayTimer;
  int _currentPage = 0;
  
  final List<CarouselItem> _carouselItems = [
    CarouselItem(
      title: 'Esperanto History',
      subtitle: 'Discover the origins of the universal language',
      gradient: const [Color(0xFF2196F3), Color(0xFF64B5F6)],
      icon: FontAwesomeIcons.clockRotateLeft,
    ),
    CarouselItem(
      title: 'Cultural Features',
      subtitle: 'Explore rich cultural traditions',
      gradient: const [Color(0xFF4CAF50), Color(0xFF81C784)],
      icon: FontAwesomeIcons.globe,
    ),
    CarouselItem(
      title: 'Learning Tips',
      subtitle: 'Master Esperanto with proven methods',
      gradient: const [Color(0xFF9C27B0), Color(0xFFBA68C8)],
      icon: FontAwesomeIcons.lightbulb,
    ),
    CarouselItem(
      title: 'Community',
      subtitle: 'Join the global Esperanto community',
      gradient: const [Color(0xFFFF9800), Color(0xFFFFB74D)],
      icon: FontAwesomeIcons.users,
    ),
  ];

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      viewportFraction: 0.85,
      initialPage: 0, // Start from first page initially
    );
    
    // Delay auto-play until after first frame
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // Jump to middle position after first frame
      if (_pageController.hasClients) {
        final middleIndex = 1000 * _carouselItems.length;
        _pageController.jumpToPage(middleIndex);
        setState(() {
          _currentPage = 0; // Reset to show first indicator
        });
      }
      _startAutoPlay();
    });
  }

  void _startAutoPlay() {
    _autoPlayTimer?.cancel(); // Cancel any existing timer
    _autoPlayTimer = Timer.periodic(const Duration(seconds: 3), (timer) {
      if (_pageController.hasClients && mounted) {
        final currentPage = _pageController.page?.round() ?? 0;
        final nextPage = currentPage + 1;
        _pageController.animateToPage(
          nextPage,
          duration: const Duration(milliseconds: 800),
          curve: Curves.easeInOutCubic,
        );
      }
    });
  }

  void _pauseAutoPlay() {
    _autoPlayTimer?.cancel();
    // Resume after 5 seconds
    Timer(const Duration(seconds: 5), () {
      if (mounted) {
        _startAutoPlay();
      }
    });
  }

  @override
  void dispose() {
    _searchController.dispose();
    _autoPlayTimer?.cancel();
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          // Dismiss keyboard when tapping outside
          FocusManager.instance.primaryFocus?.unfocus();
        },
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 140,
              floating: false,
              pinned: true,
              snap: false,
              elevation: 0,
              backgroundColor: Colors.transparent,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        AppConstants.PRIMARY_BLUE,
                        AppConstants.PRIMARY_BLUE.withOpacity(0.8),
                        AppConstants.DARK_BLUE,
                      ],
                    ),
                  ),
                  child: SafeArea(
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(24, 20, 24, 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Row(
                            children: [
                              Container(
                                padding: const EdgeInsets.all(8),
                                decoration: BoxDecoration(
                                  color: Colors.white.withOpacity(0.2),
                                  borderRadius: BorderRadius.circular(12),
                                ),
                                child: const FaIcon(
                                  FontAwesomeIcons.graduationCap,
                                  color: Colors.white,
                                  size: 24,
                                ),
                              ),
                              const SizedBox(width: 12),
                              const Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Huggo',
                                      style: TextStyle(
                                        fontSize: 28,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.white,
                                        letterSpacing: 1.2,
                                      ),
                                    ),
                                    Text(
                                      'Esperanto Learning',
                                      style: TextStyle(
                                        fontSize: 14,
                                        color: Colors.white70,
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              const CoinBalanceWidget(
                                textColor: Colors.white,
                                iconColor: Colors.white,
                                fontSize: 14,
                                showLabel: false,
                              ),
                            ],
                          ),
                          SizedBox(height: 20,)
                        ],
                      ),
                    ),
                  ),
                ),
              ),

            ),
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 20),
                    _buildSearchSection(),
                    const SizedBox(height: 20),
                    _buildLearningProgressCard(),
                    const SizedBox(height: 30),
                    _buildGridSection(),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: TextField(
        controller: _searchController,
                  decoration: InputDecoration(
            hintText: 'Search vocabulary...',
            prefixIcon: const Padding(
              padding: EdgeInsets.all(12),
              child: FaIcon(
                FontAwesomeIcons.magnifyingGlass,
                color: AppConstants.PRIMARY_BLUE,
                size: 20,
              ),
            ),
            border: InputBorder.none,
            contentPadding: const EdgeInsets.all(16),
          ),
        onSubmitted: (query) {
          if (query.isNotEmpty) {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => WordListPage(
                  category: 'Search Results',
                  searchQuery: query,
                ),
              ),
            );
          }
        },
      ),
    );
  }

  Widget _buildLearningProgressCard() {
    return Consumer(
      builder: (context, ref, child) {
        // 监听刷新触发器
        ref.watch(refreshTriggerProvider);
        final learningStatsAsync = ref.watch(learningStatsProvider);
        
        return learningStatsAsync.when(
          data: (stats) => Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  AppConstants.PRIMARY_BLUE,
                  AppConstants.DARK_BLUE,
                ],
              ),
              borderRadius: BorderRadius.circular(16),
              boxShadow: [
                BoxShadow(
                  color: AppConstants.PRIMARY_BLUE.withOpacity(0.3),
                  spreadRadius: 1,
                  blurRadius: 10,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      padding: const EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: const FaIcon(
                        FontAwesomeIcons.chartLine,
                        color: Colors.white,
                        size: 20,
                      ),
                    ),
                    const SizedBox(width: 12),
                    const Text(
                      'Learning Progress',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 16),
                Row(
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '${stats['masteredCount']} / ${stats['totalCount']}',
                            style: const TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                          const Text(
                            'Words Mastered',
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.white70,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      width: 60,
                      height: 60,
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.2),
                        shape: BoxShape.circle,
                      ),
                      child: Center(
                        child: Text(
                          '${(stats['progress'] * 100).toInt()}%',
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                LinearProgressIndicator(
                  value: stats['progress'],
                  backgroundColor: Colors.white.withOpacity(0.3),
                  valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
                  minHeight: 6,
                ),
              ],
            ),
          ),
          loading: () => Container(
            height: 120,
            decoration: BoxDecoration(
              color: Colors.grey.shade100,
              borderRadius: BorderRadius.circular(16),
            ),
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          ),
          error: (error, stack) => Container(
            height: 120,
            decoration: BoxDecoration(
              color: Colors.grey.shade100,
              borderRadius: BorderRadius.circular(16),
            ),
            child: const Center(
              child: Text('Failed to load progress'),
            ),
          ),
        );
      },
    );
  }

  Widget _buildCarouselSection() {
    return Column(
      children: [
        GestureDetector(
          onTap: _pauseAutoPlay,
          child: SizedBox(
            height: 220,
            child: PageView.builder(
              controller: _pageController,
              onPageChanged: (index) {
                setState(() {
                  _currentPage = index % _carouselItems.length;
                });
              },
              itemBuilder: (context, index) {
                final item = _carouselItems[index % _carouselItems.length];
                return AnimatedBuilder(
                  animation: _pageController,
                  builder: (context, child) {
                    double value = 1.0;
                    if (_pageController.hasClients &&
                        _pageController.position.haveDimensions) {
                      final currentPage = _pageController.page ?? 0;
                      value = currentPage - index;
                      value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0);
                    }
                    
                    return Transform.scale(
                      scale: value,
                      child: Container(
                        margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(24),
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: item.gradient,
                          ),
                        ),
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(24),
                            gradient: LinearGradient(
                              begin: Alignment.topLeft,
                              end: Alignment.bottomRight,
                              colors: [
                                Colors.white.withOpacity(0.1),
                                Colors.transparent,
                              ],
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(24),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  padding: const EdgeInsets.all(12),
                                  decoration: BoxDecoration(
                                    color: Colors.white.withOpacity(0.2),
                                    borderRadius: BorderRadius.circular(16),
                                  ),
                                  child: FaIcon(
                                    item.icon,
                                    color: Colors.white,
                                    size: 28,
                                  ),
                                ),
                                const SizedBox(height: 16),
                                Text(
                                  item.title,
                                  style: const TextStyle(
                                    fontSize: 22,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white,
                                    shadows: [
                                      Shadow(
                                        color: Colors.black26,
                                        offset: Offset(0, 2),
                                        blurRadius: 4,
                                      ),
                                    ],
                                  ),
                                ),
                                const SizedBox(height: 8),
                                Text(
                                  item.subtitle,
                                  style: const TextStyle(
                                    fontSize: 14,
                                    color: Colors.white,
                                    fontWeight: FontWeight.w400,
                                    shadows: [
                                      Shadow(
                                        color: Colors.black26,
                                        offset: Offset(0, 1),
                                        blurRadius: 2,
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ),
        const SizedBox(height: 16),
        _buildPageIndicator(),
      ],
    );
  }

  Widget _buildPageIndicator() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(_carouselItems.length, (index) {
        return AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          margin: const EdgeInsets.symmetric(horizontal: 4),
          width: _currentPage == index ? 28 : 8,
          height: 8,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),
            gradient: _currentPage == index 
                ? LinearGradient(
                    colors: _carouselItems[index].gradient,
                  )
                : null,
            color: _currentPage == index 
                ? null 
                : Colors.grey.withOpacity(0.3),
          ),
        );
      }),
    );
  }

  Widget _buildGridSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'Featured Learning',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: AppConstants.DARK_BLUE,
          ),
        ),
        const SizedBox(height: 16),
        // 醒目的特色功能卡片
        _buildFeaturedCards(),
        const SizedBox(height: 30),
        const Text(
          'More Tools',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w600,
            color: AppConstants.DARK_BLUE,
          ),
        ),
        const SizedBox(height: 16),
        // 其他功能的网格
        _buildToolsGrid(),
      ],
    );
  }

  Widget _buildFeaturedCards() {
    return Column(
      children: [
        // 每日测验 - 大卡片
        _buildDailyQuizFeaturedCard(),
        const SizedBox(height: 16),
        // 词库浏览器 - 大卡片
        _buildVocabularyBrowserFeaturedCard(),
      ],
    );
  }

  Widget _buildToolsGrid() {
    return GridView.count(
      padding: EdgeInsets.zero,
      crossAxisCount: 2,
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      childAspectRatio: 1.2,
      crossAxisSpacing: 16,
      mainAxisSpacing: 16,
      children: [
        _buildGridItem(
          'Vocabulary Learning',
          FontAwesomeIcons.bookOpen,
          Colors.blue,
          'vocabulary_learning_hero',
          () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => VocabularyLearningPage(
                questionCount: MasterVocabulary.totalWordCount,
              ),
            ),
          ),
        ),
        _buildGridItem(
          'Learning Records',
          FontAwesomeIcons.clockRotateLeft,
          Colors.green,
          'learning_records_hero',
          () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const LearningRecordsPage(),
            ),
          ),
        ),
        _buildFeatureCard(
          context,
          'Starred Words',
          'Review your starred vocabulary',
          FontAwesomeIcons.solidStar,
          Colors.amber.shade600,
          'starred_words_hero',
          () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const FavoritesPage(),
              ),
            );
          },
        ),
        _buildGridItem(
          'Wrong Questions',
          FontAwesomeIcons.triangleExclamation,
          Colors.red,
          'wrong_questions_hero',
          () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const WrongQuestionsPage(),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildDailyQuizFeaturedCard() {
    return Consumer(
      builder: (context, ref, child) {
        // 导入daily_quiz_page中的provider
        final todayQuizCompletedAsync = ref.watch(todayQuizCompletedProvider);
        final vipStatus = ref.watch(vipStatusProvider);
        
        return todayQuizCompletedAsync.when(
          data: (isCompleted) => Hero(
            tag: 'daily_quiz_hero',
            child: GestureDetector(
              onTap: (isCompleted && !vipStatus.isVip)
                  ? null 
                  : () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const DailyQuizPage(),
                        ),
                      ),
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                height: 140,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: (isCompleted && !vipStatus.isVip)
                        ? [
                            Colors.grey.shade300,
                            Colors.grey.shade500,
                          ]
                        : vipStatus.isVip
                        ? [
                            const Color(0xFFFFD700), // 金色
                            const Color(0xFFFFA500),
                            const Color(0xFFFF8C00),
                          ]
                        : [
                            const Color(0xFF6366F1),
                            const Color(0xFF8B5CF6),
                            const Color(0xFFA855F7),
                          ],
                  ),
                  borderRadius: BorderRadius.circular(24),
                  boxShadow: [
                    BoxShadow(
                      color: ((isCompleted && !vipStatus.isVip) 
                          ? Colors.grey.shade400 
                          : vipStatus.isVip 
                          ? const Color(0xFFFFD700)
                          : const Color(0xFF8B5CF6)).withOpacity(0.4),
                      spreadRadius: 0,
                      blurRadius: 20,
                      offset: const Offset(0, 10),
                    ),
                  ],
                ),
                child: Stack(
                  children: [
                    // 背景装饰
                    Positioned(
                      right: -20,
                      top: -20,
                      child: Container(
                        width: 100,
                        height: 100,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white.withOpacity(0.1),
                        ),
                      ),
                    ),
                    Positioned(
                      right: 20,
                      bottom: -10,
                      child: Container(
                        width: 60,
                        height: 60,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white.withOpacity(0.05),
                        ),
                      ),
                    ),
                    // 内容
                    Padding(
                      padding: const EdgeInsets.all(20),
                      child: Row(
                        children: [
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.center,
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Row(
                                  children: [
                                    Container(
                                      padding: const EdgeInsets.all(10),
                                      decoration: BoxDecoration(
                                        color: Colors.white.withOpacity(0.2),
                                        borderRadius: BorderRadius.circular(14),
                                      ),
                                      child: FaIcon(
                                        (isCompleted && !vipStatus.isVip)
                                            ? FontAwesomeIcons.checkCircle 
                                            : vipStatus.isVip
                                            ? FontAwesomeIcons.crown
                                            : FontAwesomeIcons.brain,
                                        size: 20,
                                        color: Colors.white,
                                      ),
                                    ),
                                    const SizedBox(width: 10),
                                    if (!(isCompleted && !vipStatus.isVip))
                                      Container(
                                        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
                                        decoration: BoxDecoration(
                                          color: Colors.white.withOpacity(0.2),
                                          borderRadius: BorderRadius.circular(10),
                                        ),
                                        child: Text(
                                          vipStatus.isVip ? 'VIP UNLIMITED' : 'TODAY',
                                          style: const TextStyle(
                                            fontSize: 9,
                                            fontWeight: FontWeight.bold,
                                            color: Colors.white,
                                            letterSpacing: 0.5,
                                          ),
                                        ),
                                      ),
                                  ],
                                ),
                                const SizedBox(height: 8),
                                Text(
                                  (isCompleted && !vipStatus.isVip) 
                                      ? 'Quiz Completed!' 
                                      : vipStatus.isVip 
                                      ? 'VIP Quiz Challenge'
                                      : 'Daily Challenge',
                                  style: const TextStyle(
                                    fontSize: 19,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white,
                                  ),
                                ),
                                const SizedBox(height: 2),
                                Flexible(
                                  child: Text(
                                    (isCompleted && !vipStatus.isVip)
                                        ? 'Great job! Come back tomorrow' 
                                        : vipStatus.isVip
                                        ? 'Unlimited tests with random questions'
                                        : 'Test your knowledge with 100 questions',
                                    style: TextStyle(
                                      fontSize: 12,
                                      color: Colors.white.withOpacity(0.9),
                                      height: 1.2,
                                    ),
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          if (!(isCompleted && !vipStatus.isVip))
                            Container(
                              padding: const EdgeInsets.all(12),
                              decoration: BoxDecoration(
                                color: Colors.white.withOpacity(0.2),
                                borderRadius: BorderRadius.circular(16),
                              ),
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Text(
                                    vipStatus.isVip ? '∞' : '100',
                                    style: const TextStyle(
                                      fontSize: 18,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white,
                                    ),
                                  ),
                                  Text(
                                    vipStatus.isVip ? 'Unlimited' : 'Questions',
                                    style: const TextStyle(
                                      fontSize: 9,
                                      color: Colors.white70,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          loading: () => Container(
            height: 140,
            decoration: BoxDecoration(
              color: Colors.grey.shade200,
              borderRadius: BorderRadius.circular(24),
            ),
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          ),
          error: (_, __) => _buildDailyQuizFeaturedCard(),
        );
      },
    );
  }

  Widget _buildVocabularyBrowserFeaturedCard() {
    return Hero(
      tag: 'vocabulary_browser_hero',
      child: GestureDetector(
        onTap: () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => const VocabularyBrowserPage(),
          ),
        ),
        child: Container(
          height: 140,
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xFF0EA5E9),
                Color(0xFF0284C7),
                Color(0xFF0369A1),
              ],
            ),
            borderRadius: BorderRadius.circular(24),
            boxShadow: [
              BoxShadow(
                color: const Color(0xFF0284C7).withOpacity(0.4),
                spreadRadius: 0,
                blurRadius: 20,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: Stack(
            children: [
              // 背景装饰
              Positioned(
                left: -30,
                top: -30,
                child: Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white.withOpacity(0.1),
                  ),
                ),
              ),
              Positioned(
                right: -10,
                bottom: -30,
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white.withOpacity(0.05),
                  ),
                ),
              ),
              // 内容
              Padding(
                padding: const EdgeInsets.all(20),
                child: Row(
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Row(
                            children: [
                              Container(
                                padding: const EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                  color: Colors.white.withOpacity(0.2),
                                  borderRadius: BorderRadius.circular(14),
                                ),
                                child: const FaIcon(
                                  FontAwesomeIcons.bookOpen,
                                  size: 20,
                                  color: Colors.white,
                                ),
                              ),
                              const SizedBox(width: 10),
                              Container(
                                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
                                decoration: BoxDecoration(
                                  color: Colors.white.withOpacity(0.2),
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                child: const Text(
                                  'EXPLORE',
                                  style: TextStyle(
                                    fontSize: 9,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white,
                                    letterSpacing: 0.5,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 8),
                          const Text(
                            'Word Library',
                            style: TextStyle(
                              fontSize: 19,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                          const SizedBox(height: 2),
                          Flexible(
                            child: Text(
                              'Browse and search through 1000+ Esperanto words',
                              style: TextStyle(
                                fontSize: 12,
                                color: Colors.white.withOpacity(0.9),
                                height: 1.2,
                              ),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            '1000+',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                          Text(
                            'Words',
                            style: TextStyle(
                              fontSize: 9,
                              color: Colors.white70,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildGridItem(String title, IconData icon, Color iconColor, String heroTag, VoidCallback onTap) {
    return Hero(
      tag: heroTag,
      child: GestureDetector(
        onTap: onTap,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: iconColor.withOpacity(0.15),
                spreadRadius: 2,
                blurRadius: 15,
                offset: const Offset(0, 8),
              ),
            ],
          ),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              borderRadius: BorderRadius.circular(20),
              onTap: onTap,
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      padding: const EdgeInsets.all(18),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [
                            iconColor.withOpacity(0.1),
                            iconColor.withOpacity(0.05),
                          ],
                        ),
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: iconColor.withOpacity(0.2),
                          width: 1,
                        ),
                      ),
                      child: FaIcon(
                        icon,
                        size: 28,
                        color: iconColor,
                      ),
                    ),
                    const SizedBox(height: 16),
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: AppConstants.DARK_BLUE,
                        height: 1.2,
                      ),
                      textAlign: TextAlign.center,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildFeatureCard(BuildContext context, String title, String subtitle, IconData icon, Color iconColor, String heroTag, VoidCallback onTap) {
    return _buildGridItem(
      title,
      icon,
      iconColor,
      heroTag,
      onTap,
    );
  }
}

class CarouselItem {
  final String title;
  final String subtitle;
  final List<Color> gradient;
  final IconData icon;

  const CarouselItem({
    required this.title,
    required this.subtitle,
    required this.gradient,
    required this.icon,
  });
}